<template>
	<view class="page">
		<view class="header">
			<image @click="back" src="/static/image/login/left.png" mode=""></image>
			<text>点赞</text>
		</view>
		<view style="height: 176rpx;">
			
		</view>
		<scroll-view scroll-y >
			<view class="cont">
				
				<view class="searchBox">
					<image src="/static/image/mine/search.png" mode=""></image>
					<input placeholder-class="searchBoxinput" type="text" placeholder="请输入关键词" />
				</view>
				
				<div v-for="(item, index) in contentList" :key="index">
					
					<view class="box2" style="border-radius: 16rpx;" v-if="item.type == 1">
			<!-- 			<view class="firsttitle">
							
							<view class="left">
								<image :src="item.peopleSrc" mode=""></image>
								<text>{{item.people}}</text>
							</view>
							<text class="right">{{item.time}}</text>
						</view> -->
						<div class="showcontentitem" >
							<image class="left" :src="item.src" mode=""></image>
							<div class="right">
								<text class="title">
									{{item.title}}
								</text>
								
								<view class="tag">
									<text v-for="(it,ind) in item.tag" :key="ind" class="tagitem">
										{{it}}
									</text>
								</view>
								<div class="suggest">
									<text >
										{{item.suggest}}
									</text>
								</div>
								
								<text class="contentdesc">
									{{item.content}}
								</text>
				<!-- 				<div class="subtitle">
									<text v-for="(itm) in item.list.slice(0, 3)">{{itm}}</text>
								</div> -->
								
								<div class="operatecontent">
									<image v-if="!item.isstar" class="love" src="../../static/image/home/love.png" mode=""></image>
									<image v-else class="love" src="../../static/image/home/loveactive.png" mode=""></image>
									
									<image v-if="!item.iscollect" class="star" src="../../static/image/home/star.png" mode=""></image>
									<image v-else class="star" src="../../static/image/home/staractive.png" mode=""></image>
									
									<image class="fenxiang" src="../../static/image/home/fenxiang.png" mode=""></image>
								</div>
							</div>
						</div>
					</view>
				<!-- 	<div class="box" style="border-radius: 16rpx;" v-if="item.type == 1">
						<view class="firsttitle">
							<view class="left">
								<image :src="item.peopleSrc" mode=""></image>
								<text>{{item.people}}</text>
							</view>
							<text class="right">{{item.time}}</text>
						</view>
						<div class="toptips">
							 <text>地点：7个</text>
							 <text>步行：2h35min</text>
							 <text>车程：1h50min</text>
						</div>
						
						<div class="tipbox">
							 <qianStep v-if="options.length > 0" :options='options'>
							   <template v-slot:left='{index}'>
								 <view class="step_circle2"></view>
								 <view class="step_line" v-if="index != options.length-1"></view>
							   </template>
							   <template v-slot:right='{item}'>
								 <view class="setp_time" style="font-size:26rpx;">
								   <text>{{item.time}}</text>
								   <text style="margin-left: 12rpx;">{{item.content}}</text>
								 </view>
									   
							   </template>
							 </qianStep>
							 <div v-else class="nodata">
								 <image src="../../static/image/home/home-nodata.png" mode=""></image>
								<text>躺平中～暂无行程</text>
							 </div>
							 <image  @click="handleMore" class="more" src="/static/image/home/more.png" mode=""></image>
							<div class="operate">
								<image @click="openShare"  src="/static/image/home/share.png" mode=""></image>
								<text class="line"></text>
								<image  src="/static/image/home/clock.png" mode=""></image>
								<text class="line"></text>
								<image  src="/static/image/home/map.png" mode=""></image>
							</div>
						</div>
					</div> -->
					
					<view class="box2" style="border-radius: 16rpx;" v-if="item.type == 0">
					<!-- 	<view class="firsttitle">
							
							<view class="left">
								<image :src="item.peopleSrc" mode=""></image>
								<text>{{item.people}}</text>
							</view>
							<text class="right">{{item.time}}</text>
						</view> -->
						<div class="showcontentitem" >
							<image class="left" :src="item.src" mode=""></image>
							<div class="right">
								<text class="title">
									{{item.title}}
								</text>
								<div class="subtitle">
									<text v-for="(itm) in item.list.slice(0, 3)">{{itm}}</text>
								</div>
								
								<div class="operatecontent">
									<image v-if="!item.isstar" class="love" src="../../static/image/home/love.png" mode=""></image>
									<image v-else class="love" src="../../static/image/home/loveactive.png" mode=""></image>
									
									<image v-if="!item.iscollect" class="star" src="../../static/image/home/star.png" mode=""></image>
									<image v-else class="star" src="../../static/image/home/staractive.png" mode=""></image>
									
									<image class="fenxiang" src="../../static/image/home/fenxiang.png" mode=""></image>
								</div>
							</div>
						</div>
					</view>
					
					
					
					
				</div>
				
				
		<!-- 		<view class="item">
					<text class="left">头像</text>
					<view class="right">
						<text></text>
						<image class="avator" src="/static/image/home/avator.png" mode=""></image>
						<image class="btn" src="/static/image/mine/right.png" mode=""></image>
					</view>
				</view>
				<view class="item">
					<text class="left">昵称</text>
					<view class="right">
						<text>Franklin Ryan</text>
						<image class="btn" src="/static/image/mine/right.png" mode=""></image>
					</view>
				</view>
				<view class="item">
					<text class="left">性别</text>
					<view class="right">
						<text>男</text>
						<image class="btn" src="/static/image/mine/right.png" mode=""></image>
					</view>
				</view>
				<view class="item">
					<text class="left">生日</text>
					<view class="right">
						<text>1990-02-22</text>
						<image class="btn" src="/static/image/mine/right.png" mode=""></image>
					</view>
				</view> -->
<!-- 				<view class="firsttitle">
					<text class="aaa">* </text>
					<text class="bbb">问题和意见</text>
				</view>
				<view class="textarea1">
					<textarea v-model="suggest"
					class=""
					 placeholder="请输入您的需求或者意见（如获取验证码失败，请填写当前注册的手机号码）"
					 placeholder-class="textareaplaceholder"
					 />
				</view>
				<view class="subtitle">
					<text>联系方式</text>
				</view>
				<view class="textarea2">
					<input type="text" @input="handleConcat" placeholder="请输入您的电子邮箱或手机号，以便回复" />
				</view> -->
				<!-- <button>提交</button> -->
			</view>
<!-- 			<view class="content">
				<view class="content-top">
					<view class="content-top-one">
						<image src="/static/image/travel/position.png" mode=""></image>
						<text>{{locationData.title}}</text>
					</view>
					<text class="content-top-two">{{locationData.desc}}</text>
				</view>
				<view v-if="step == 1" class="content-comment">
					<view class="comment-clock">
						<text class="comment-clock-left">共有{{locationData.count}}人打卡</text>
						<view @click="daka" class="comment-clock-right">
							<image src="/static/image/travel/clockin.png" mode=""></image>
							<text>打卡</text>
						</view>
					</view>
					<view class="commentbox">
						<view class="commentboxitem" v-for="(item, index) in list" :key="index">
							<view class="top">
								<image :src="item.src" mode=""></image>
								<text>{{item.name}}</text>
							</view>
							<view class="middle">
								<text >
									{{item.desc}}
								</text>
							</view>
							<view class="end">
								<image v-for="(itm, idx) in item.poster" :key="idx"
								:src="itm" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<view class="daka">
					<text class="dakatitle">打卡信息</text>
					<view class="textarea11">
						<textarea v-model="txt"
						class=""
						 placeholder="请在此处输入文字信息"
						 placeholder-class="textareaplaceholder"
						 />
					</view>
					
					<view class="imgoperate">
						<view class="img" v-for="(itm, idx) in showImg"  :key="idx">
							<image :src="itm" mode=""></image>
						</view>
						
						<image class="add" @click="add" src="/static/image/travel/addpic.png" mode=""></image>
					</view>
					
					<button class="btn">打卡</button>
				</view>

			</view> -->
		</scroll-view>
		<view class="" style="height: 190rpx;">
		</view>
		<tabbar selected="4"></tabbar>
	</view>
</template>

<script>
	import tabbar from "../../components/tabbar/tabbar.vue";
	import people from '../../static/image/travel/people.png'
	import listItem from '../../static/image/travel/list-item.png'
		import  poster from '../../static/image/home/poster.png'
			import qianStep from '../../components/ly-step/ly-step.vue'
	import jdAvator from '../../static/image/mine/jdavator.png'
	export default {
		components: {
			tabbar: tabbar,
			qianStep
		},
		data() {
			return {
				suggest: '',
				concat: '',
				txt: '',
				showImg: [people],
				step: 2, // 1列表 2添加
				locationData: {
					title: '冰心故居',
					desc: '福建省福州市鼓楼区杨桥东路17号',
					count: 2334,
					
				},
				list: [
				{
					name: '岩瑶妹',
					src: people,
					desc: '在项目伊始时做一个用户研究的作用好过于在项目落地后再对50个用户进行测试',
					poster: [
						listItem, listItem,listItem
					]
				},
				{
					name: 'Chad Ortiz',
					src: people,
					desc: '有功无过是短暂的，无功有过是行不通的，有功有过是最好的',
					poster: [
						listItem, listItem,listItem, listItem, listItem,
					]
				},
				{
					name: 'Margaret Owen',
					src: people,
					desc: '不要在你家里放一件你不知其用，或你认为不美的东西',
					poster: [
						listItem, listItem,listItem, listItem
					]
				},
				{
					name: 'Ruby Pena',
					src: people,
					desc: '不要在你家里放一件你不知其用，或你认为不美的东西',
					poster: [
						listItem,
					]
				}
				],
				contentList: [
					{
						peopleSrc: poster,
						people: '卜琬',
						time: '2025-03-01 12:34',
						type: 0,
						src: poster,
						title: '深圳-福州-3日',
						list: [
							'D1：深圳-福州，三巷七坊',
							'D2：福州，平潭岛',
							'D3：福州-深圳，海坛古城'
						],
						isstar: true,
						iscollect: true,
					},
					
					{
						peopleSrc: poster,
						people: '卜琬',
						time: '2025-03-01 12:34',
						type: 0,
						src: poster,
						title: '深圳-福州-3日',
						list: [
							'D1：深圳-福州，三巷七坊',
							'D2：福州，平潭岛',
							'D3：福州-深圳，海坛古城'
						],
						isstar: true,
						iscollect: true,
					},
					{
						type: 1,
						src: jdAvator,
						title: '福建博物馆',
						tag: [
							'去哪儿 No.1',
							'携程 No.1'
						],
						suggest: '建议游玩＞3小时',
						content: '福建博物院是福建省文化和旅游厅直属单位，位于福建省福州市鼓楼区湖头哈哈哈哈',
						isstar: true,
						iscollect: true,
					}
					// {
					// 	peopleSrc: poster,
					// 	people: '卜琬',
					// 	time: '2025-03-01 12:34',
					// 	type: 1,
					// 	place: '7个',
					// 	walk: '2h35min',
					// 	car: '1h50min',
					// 	list: [
					// 		{
					// 		  content: '进贤门',
					// 		  time: '08:00-09:00',
					// 		},
					// 		{
					// 		  content: '揭阳学宫',
					// 		  time: '09:00-12:00',
					// 		},
					// 		{
					// 		  content: '罗家老字号青果汁',
					// 		  time: '12:00-14:00',
					// 		},
					// 	]
					// },
					// {
					// 	peopleSrc: poster,
					// 	people: '卜琬',
					// 	time: '2025-03-01 12:34',
					// 	type: 0,
					// 	src: poster,
					// 	title: '深圳-福州-3日',
					// 	list: [
					// 		'D1：深圳-福州，三巷七坊',
					// 		'D2：福州，平潭岛',
					// 		'D3：福州-深圳，海坛古城'
					// 	],
					// 	isstar: false,
					// 	iscollect: true,
					// },
					// {
					// 	peopleSrc: poster,
					// 	people: '卜琬',
					// 	time: '2025-03-01 12:34',
					// 	type: 0,
					// 	src: poster,
					// 	title: '深圳-福州-3日',
					// 	list: [
					// 		'D1：深圳-福州，三巷七坊',
					// 		'D2：福州，平潭岛',
					// 		'D3：福州-深圳，海坛古城'
					// 	],
					// 	isstar: false,
					// 	iscollect: false,
					// }
				],
				hasMore: true,
				  options: [
					{
					  content: '进贤门',
					  time: '08:00-09:00',
					},
					{
					  content: '揭阳学宫',
					  time: '09:00-12:00',
					},
					{
					  content: '罗家老字号青果汁',
					  time: '12:00-14:00',
					},
					{
					  content: '罗家老字号青果汁',
					  time: '12:00-14:00',
					},
				  ],
			}
		},
		methods: {
			openShare() {
				uni.navigateTo({
					url: '/pages/sharePage/sharePage'
				})
			},
			handleConcat(event) {
				this.suggest = event.target.detail
			},
			back() {
				uni.navigateBack()
			},
			daka() {
				this.step = 2
			},
			add() {
				uni.chooseImage({
				        count: 5, // 默认9, 设置图片的最大选择数，设置为1表示只选择一张图片
				        sourceType: ['camera'], // 可选前置或后置，默认['album', 'camera']
				        success: (res) => {
				          this.showImg = res.tempFilePaths || []; // 获取选中的文件列表，取第一张图片的路径
				        },
				        fail: (err) => {
				          console.error('调用图片失败',err);
				        }
				      });
			},
			handleMore() {
				// this.options = [
				// 	...this.options,
				// 	{
				// 	  content: '进贤门',
				// 	  time: '08:00-09:00',
				// 	},
				// 	{
				// 	  content: '揭阳学宫',
				// 	  time: '09:00-12:00',
				// 	},
				// 	{
				// 	  content: '罗家老字号青果汁',
				// 	  time: '12:00-14:00',
				// 	},
				// 	{
				// 	  content: '罗家老字号青果汁',
				// 	  time: '12:00-14:00',
				// 	},
				// ]
				// this.hasMore = false
				
			},
		}
	}
</script>

<style lang="less" scoped>
.page {
	background: #EEF0F4;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	.header {
		height: 176rpx;
		background-color: #fff;
		// padding-top: 108rpx;
		display: flex;
		justify-content: center;
		// align-items: center;
		position: fixed;
		width: 100%;
		z-index: 3;
		image {
			position: absolute;
			left: 32rpx;
			bottom: 24rpx;
			width: 34rpx;
			height: 34rpx;
		}
		text {
			position: absolute;
			bottom: 16rpx;
			font-weight: 600;
			font-size: 34rpx;
			color: #221715;
			line-height: 51rpx;
		}
	}
	.content {
		flex: 1;
		margin: 20rpx;
		// padding-top: 176rpx;
		background-color: #FFF;
		
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		.content-top {
			padding: 30rpx 30rpx 30rpx 30rpx;
			border-bottom: 2rpx solid #F3F5F7;
			.content-top-one {
				display: flex;
				align-items: center;
				height: 48rpx;
				image {
					width: 46rpx;
					height: 40rpx;
					margin-left: 6rpx;
					margin-bottom: 20rpx;
				}
				text {
					font-weight: 500;
					font-size: 34rpx;
					color: #221715;
					line-height: 48rpx;
					margin-left: 16rpx;
				}
			}
			.content-top-two {
				font-weight: 400;
				font-size: 28rpx;
				color: #777777;
				line-height: 40rpx;
				
			}
		}
		.content-comment {
			padding: 36rpx 30rpx;
			.comment-clock {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;
				.comment-clock-left {
					font-weight: bold;
					font-size: 30rpx;
					color: #1A1A1A;
					line-height: 42rpx;
				}
				.comment-clock-right {
					width: 144rpx;
					height: 56rpx;
					background: linear-gradient( 270deg, #0187F5 0%, #2DCCC2 100%);
					border-radius: 28rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					image {
						width: 32rpx;
						height: 32rpx;
					}
					text {
						margin-left: 14rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 40rpx;
					}
				}
			}
			.commentbox {
				.commentboxitem {
					margin-bottom: 20rpx;
					border-bottom: 2rpx solid #F3F5F7;;
					.top {
						margin-bottom: 20rpx;
						display: flex;
						align-items: center;
						image {
							width: 48rpx;
							height: 48rpx;
							border-radius: 16rpx;
							margin-right: 16rpx;
						}
						text {
							font-weight: 400;
							font-size: 28rpx;
							color: #1A1A1A;
							line-height: 40rpx;
						}
					}
					.middle {
						margin-bottom: 20rpx;
						text {
							font-weight: 400;
							font-size: 28rpx;
							color: #595959;
							line-height: 40rpx;
						}
					}
					.end {
						margin-bottom: 20rpx;
						image {
							width: 100rpx;
							height: 100rpx;
							border-radius: 8rpx;
							margin-right: 16rpx;
						}
					}
				}
			}
		}
		.daka {
			padding: 36rpx 30rpx;
			.dakatitle {
				font-weight: 500;
				font-size: 30rpx;
				color: #1A1A1A;
				line-height: 42rpx;
				margin-bottom: 20rpx;
			}
			.textarea11 {
				// width: 80%;
				margin-bottom: 20rpx;
				border-radius: 16rpx;
				// width: 400rpx;
				// height: 200rpx;
				background: #F5F7F9;
				
				// padding: 20rpx;\
				textarea {
					padding: 20rpx;
					font-size: 28rpx;
					line-height: 40rpx;
				}
			}
			.textareaplaceholder {
				font-size: 28rpx;
				color: #999999;
				line-height: 40rpx;
				// padding: 20rpx;
			}
			.imgoperate {
				display: flex;
				margin-bottom: 80rpx;
				.img {
					width: 140rpx;
					height: 140rpx;
					margin-right: 24rpx;
					image {
						width: 140rpx;
						height: 140rpx;
					}
				}
				.add {
					width: 140rpx;
					height: 140rpx;
				}
			}
			.btn {
				margin-top: 80rpx;
				margin: 0 20rpx;
				height: 88rpx;
				background: #006FF6;
				border-radius: 44rpx;
			}
		}
	}
}

.cont {
	// width: 710rpx;
	margin: 20rpx;
	// height: 682rpx;
	// background: #FFFFFF;
	// border-radius: 16rpx;
	padding: 30rpx;
	// .firsttitle {
		
	// 	margin-bottom: 20rpx;
	// 	.aaa {
	// 		font-weight: bold;
	// 		font-size: 30rpx;
	// 		color: #E80000;
	// 		line-height: 42rpx;
	// 		padding-right: 10rpx;
	// 		padding-top: 10rpx;
	// 	}
	// 	.bbb{
	// 		font-weight: bold;
	// 		color: #1A1A1A;
	// 		font-size: 30rpx;
	// 		line-height: 42rpx;
	// 	}
	// }
	.textarea1 {
		// width: 650rpx;
		height: 200rpx;
		background: #F5F7F9;
		border-radius: 16rpx;
		margin-bottom: 30rpx;
		
		// padding: 20rpx;\
		textarea {
			padding: 20rpx;
			font-size: 28rpx;
			line-height: 40rpx;
		}
	}
	.subtitle {
		margin-bottom: 20rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #1A1A1A;
		line-height: 42rpx;
	}
	.textarea2 {
		margin-bottom: 80rpx;
		// width: 650rpx;
		height: 100rpx;
		background: #F5F7F9;
		border-radius: 16rpx;
		input {
			padding: 20rpx;
			font-size: 28rpx;
			line-height: 40rpx;
		}
	}
	// button {
	// 	// width: 650rpx;
	// 	height: 88rpx;
	// 	background: #006FF6;
	// 	border-radius: 44rpx;
		
	// 	font-weight: bold;
	// 	font-size: 30rpx;
	// 	color: #FFFFFF;
	// 	line-height: 42rpx;
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// }
	
	
	.item {
		padding:  0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2rpx solid #F3F5F7;
		.left {
			font-size: 28rpx;
			color: #1A1A1A;
			line-height: 40rpx;
		}
		.right {
			display: flex;
			// align-items: center;
			align-items: start;
			text {
				font-size: 28rpx;
				color: #1A1A1A;
				line-height: 40rpx;
			}
			.avator {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
			.btn {
				width: 40rpx;
				height: 40rpx;
			}

		}

	}
	
	button {
		height: 88rpx;
		background: #006FF6;
		border-radius: 44rpx;
		
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 42rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 80rpx;
	}
}


.showcontentitem {
	background-color: #fff;
				position: relative;
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
				// padding-bottom: 30rpx;
				padding: 20rpx;
				// border-radius: 16rpx;
				border-bottom: 2rpx solid #F3F5F7;
				.left {
					width: 240rpx;
					height: 240rpx;
					margin-right: 20rpx;
					border-radius: 16rpx;
				}
				.right {
					flex: 1;
					display: flex;
					flex-direction: column;
					.title {
						color: #221715;
						font-size: 28rpx;
						line-height: 40rpx;
						// margin-right: 20rpx;
					}
					.subtitle {
						display: flex;
						flex-direction: column;
						color: #777777;
						font-size: 28rpx;
						line-height: 40rpx;
						margin-top: 20rpx;
					}
					.operatecontent {
						position: absolute;
						top: 30rpx;
						right: 20rpx;
						display: flex;
						align-items: center;
						.love {
							width: 28rpx;
							height: 26rpx;
							margin-right: 22rpx;
						}
						.star {
							width: 28rpx;
							height: 26rpx;
							margin-right: 18rpx;
						}
						.fenxiang {
							width: 32rpx;
							height: 26rpx;
						}
					}
				}
			}
			
			
			.tipbox {
				border-top-left-radius: 16rpx;
				border-top-right-radius: 16rpx;
				position: relative;
				z-index: 1;
				// top: -12rpx;
				
				min-height: 510rpx;
				margin: 0 20rpx 20rpx;
				// margin-top: -10rpx;
				padding: 40rpx 42rpx 0 42rpx;
				// background-color: #FFFFFF;
				background-color: #F5F7F9;
				// background-color: red;
				
				border-radius: 0rpx 0rpx 16rpx 16rpx;
				.nodata {
					display: flex;
					flex-direction: column;
					image {
						width: 416rpx;
						height: 346rpx;
						margin: 0 auto;
						margin-top: 22rpx;
						margin-bottom: 32rpx;
					}
					text {
						margin: 0 auto;
						color: #999999;
						font-size: 28rpx;
						line-height: 40rpx;
					}
				}
				.more {
					width: 24rpx;
					height: 22rpx;
					position: absolute;
					left: 50%;
					bottom: 20rpx;
					margin-left: -12rpx;
					border: 2rpx solid #D9DFE6;
				}
				.operate {
					width: 72rpx;
					height: 268rpx;
					background:  #F5F7F9;
					border-radius: 36rpx;
					position: absolute;
					right: 22rpx;
					bottom: 20rpx;
					display: flex;
					padding: 16rpx 0;
					flex-direction: column;
					// align-items: s;
					align-items: center;
					justify-content: space-around;
					border: 2rpx solid #D9DFE6;
					image {
						cursor: pointer;
						width: 36rpx;
						height: 36rpx;
						// width: auto;
						// min-height: 36rpx;
					}
					.line {
						width: 48rpx;
						height: 1rpx;
						background-color: #E5E5E5;
					}
				}
			}
			
			
			.step_circle2 {
			  width: 18rpx;
			  height: 18rpx;
			  background: #FFFFFF;
			  border: 2rpx solid #1076F2;
			  border-radius: 50%;
			  margin-left: 9rpx;
			}
			.step_line {
			  width: 2rpx;
			  height: 200%;
			  margin-left: 20rpx;
			  display: flex;
			  flex-direction: column;
			  flex: 1;
			  border-left: 1rpx dotted #D9DFE6;
			  }
			  .setp_time {
				  // color: #777777;
				  color: #1A1A1A;
				  font-size: 28rpx;
				  line-height: 40rpx;
			  }
			  .setp_content {
				color: #080808;
				font-size: 28rpx;
				line-height: 40rpx;
			  }
			  
			  .box {
				  background-color: #fff;
				  padding: 0;
				  padding-bottom: 30rpx;
				  border-radius: 16rpx;
				  
				  margin-bottom: 20rpx;
			  }
			  
			  .toptips {
			  	background: linear-gradient( 270deg, #0187F5 0%, #2DCCC2 100%);
			  	border-top-left-radius: 16rpx;
			  	border-top-right-radius: 16rpx;
			  	height: 80rpx;
			  	padding-bottom: 6rpx;
			  	padding-left: 20rpx;
			  	display: flex;
			  	align-items: center;
			  	// margin: 0 20rpx;
			  	text {
			  		font-weight: 500;
			  		font-size: 24rpx;
			  		color: #FFFFFF;
			  		line-height: 34rpx;
			  		margin-right: 32rpx;
			  	}
			  }
			  
			  
			  .firsttitle {
				  display: flex;
				  align-items: center;
				  // margin-bottom: 20rpx;
				  padding: 20rpx;
				  background-color: #fff;
			  	.left {
					display: flex;
					align-items: center;
			  		image {
			  			width: 72rpx;
			  			height: 72rpx;
						margin-right: 20rpx;
						border-radius: 50%;
			  		}
			  		text {
						font-weight: 400;
						font-size: 28rpx;
						color: #1A1A1A;
						line-height: 40rpx;
					}
			  	}
			  	.right {
			  		font-weight: 400;
			  		font-size: 28rpx;
			  		color: #1A1A1A;
			  		line-height: 40rpx;
			  	}
			  }
			  
			  .searchBox {
				  padding: 0 20rpx;
				  margin-bottom: 20rpx;
				  height: 80rpx;
				  background: #FFFFFF;
				  border-radius: 44rpx;
				  border: 1rpx solid #D9D9D9;
				  display: flex;
				  align-items: center;
				  image {
					  width: 48rpx;
					  height: 48rpx;
					  margin-right: 20rpx;
				  }
				  .searchBoxinput {
					  font-weight: 400;
					  font-size: 28rpx;
					  color: #999999;
					  line-height: 40rpx;
				  }
			  }
			  
			  .tag{
				  margin-bottom: 20rpx;
				  margin-top: 20rpx;
				  text {
					  padding: 4rpx 10rpx;
					  height: 40rpx;
					  background: #FFEEDF;
					  border-radius: 4rpx;
					  margin-left: 10rpx;
					  margin-bottom: 10rpx;
					  font-size: 24rpx;
					  line-height: 34rpx;
				  }
				  text:first-child {
					  margin-left: 0!important;
				  }
			  }
			  .suggest{
				  min-height: 32rpx;
				  border-radius: 4rpx;
				  
				  
				  box-sizing: border-box;
				  margin-bottom: 18rpx;
				  
				  // width: 204rpx;
				  text {
					  border: 1rpx solid #B0C3DD;
					  padding: 0 10rpx;
					 font-size: 24rpx;
					 color: #0F4999;
					 line-height: 32rpx; 
				  }
			  }
			  .contentdesc {
				  font-size: 24rpx;
				  color: #777777;
				  line-height: 34rpx;
				  max-width: 410rpx;
				  height: 68rpx;
				  // white-space: nowrap;
				  lines: 2;
				    overflow: hidden;
				    text-overflow: ellipsis;
			  }
</style>
